import { Layout, Menu, Breadcrumb,Button  } from 'antd';
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
  PoweroffOutlined
} from '@ant-design/icons';
import React from "react"
import "../style/home.css"
import {Route} from "react-router-dom"
// 编辑器
import Article_List from "./articlelist"
// axios
import axios from "../api/axios"
// url
import Url from "../api/url"
// 编辑器
import Editor from "./editor"
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;



class SiderDemo extends React.Component {
constructor(props){
  super(props)
this.islogin=false
}
  state = {
    collapsed: false
  };
  
  onCollapse = collapsed => {

    this.setState({ collapsed });
  };
   handleClickArticle = e=>{
  
    if(e.key=='addArticle'){
      this.props.history.push('/admin/add')
    }else{
      this.props.history.push('/admin/list')
    }

  }
   Auth =()=>{
    axios.get(Url.checklogin).then(res=>{
      if(res.data.state){
        this.islogin = true
      }else{
        this.props.history.push('/admin/login')
      }
    }).catch(()=>{
      this.props.history.push('/admin/login')
    })
   }
  componentWillMount(){
    if(this.props.location.pathname.startsWith("/admin/")){
      this.Auth()
    }
  }
  Exit=()=>{
    axios.get(Url.logout).then(()=>{
       window.location.reload()
    })
  }
  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1" icon={<PieChartOutlined />}>
              工作台
            </Menu.Item>
            <Menu.Item key="2" icon={<DesktopOutlined />}>
              Option 2
            </Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="文章管理"  onClick={this.handleClickArticle}>
            <Menu.Item key="addArticle">添加文章</Menu.Item>
            <Menu.Item key="articleList">文章列表</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
              <Menu.Item key="6">Team 1</Menu.Item>
              <Menu.Item key="8">Team 2</Menu.Item>
            </SubMenu>
            <Menu.Item key="9" icon={<FileOutlined />} />
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
          <Button
          type="primary"
          icon={<PoweroffOutlined />}
          onClick={() => this.Exit(2)}
        />
          </Header>
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              {this.islogin?
     (<>           <Route path="/admin/add/" exact   component={Editor} />
                <Route path="/admin/add/:id"  exact   component={Editor} />
                <Route path="/admin/list/"   component={Article_List} />
    </>):(<></>)
              }
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
         
        </Layout>
      </Layout>
    );
  }
}

export default SiderDemo